<!--
Copyright (C) 2024 The XLang Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xMind Chat Test Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        #chat-container {
            width: 60%;
            max-width: 600px;
            background: white;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        #history {
            list-style-type: none;
            padding: 0;
            margin-bottom: 20px;
            max-height: 300px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
        }

            #history li {
                padding: 10px;
                border-bottom: 1px solid #ddd;
            }

                #history li:nth-child(even) {
                    background-color: #f9f9f9;
                }

        #prompt-input, #model-select {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #send-btn {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

            #send-btn:hover {
                background-color: #0056b3;
            }
    </style>
</head>
<body>

    <div id="chat-container">
        <select id="model-select"></select>
        <ul id="history">
            <!-- History of prompts and responses will appear here -->
        </ul>
        <input type="text" id="prompt-input" placeholder="Enter your prompt here...">
        <button id="send-btn">Send</button>
    </div>

    <script>
        let sessionId = "";

        // Get the base URL from the page's location
        const baseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;

        // Fetch available models
        fetch(`${baseUrl}/api/rootagents`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer NO_KEY`
            }
        })
            .then(response => response.json())
            .then(data => {
                const modelSelect = document.getElementById('model-select');
                data.forEach(model => {
                    const option = document.createElement('option');
                    option.value = model;
                    option.textContent = model;
                    modelSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error fetching models:', error);
                alert('An error occurred while fetching the models!');
            });

        document.getElementById('send-btn').addEventListener('click', function () {
            const prompt = document.getElementById('prompt-input').value;
            const model = document.getElementById('model-select').value;

            if (prompt.trim() === '') {
                alert('Please enter a prompt!');
                return;
            }

            // Add the prompt to the history list
            const historyList = document.getElementById('history');
            const promptItem = document.createElement('li');
            promptItem.textContent = `You: ${prompt}`;
            historyList.appendChild(promptItem);

            // Clear the input box
            document.getElementById('prompt-input').value = '';

            // Send the prompt to the API with SessionID
            fetch(`${baseUrl}/api/chat/completions`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer NO_KEY`
                },
                body: JSON.stringify({
                    model: model,
                    messages: [{ role: 'user', content: prompt }],
                    sessionId: sessionId
                })
            })
                .then(response => response.json())
                .then(data => {
                    // Get the response from the API
                    sessionId = data.sessionId;
                    const responseText = data.choices[0].message.content;

                    // Add the response to the history list
                    const responseItem = document.createElement('li');
                    responseItem.textContent = `AI: ${responseText}`;
                    historyList.appendChild(responseItem);

                    // Scroll the history to the bottom
                    historyList.scrollTop = historyList.scrollHeight;
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while fetching the response!');
                });
        });
    </script>

</body>
</html>
